<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!-- 引入easyui的样式 -->	
<link rel="stylesheet"  type="text/css" href="${pageContext.request.contextPath}/themes/default/easyui.css">
<link rel="stylesheet"  type="text/css" href="${pageContext.request.contextPath}/themes/icon.css">
<link rel="stylesheet"  type="text/css" href="${pageContext.request.contextPath}/themes/bootstrap/layout.css">
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<!-- js文件 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/easyui-lang-zh_CN.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function(){
	var cont=0;
	var newdate = new Date();
	var newyear = newdate.getFullYear();
	var newmonth = newdate.getMonth();
	var newDate = newdate.getDate();
	var newhours = newdate.getHours();
	var newtime = newdate.getMinutes();
	var ingdate=newyear+'/'+newmonth+'/'+newDate+" "+newhours+":"+newtime;	
    $('#btn').bind('click', function(){    	
    	if($('#lreson').val()==""||$('#lnumber').val()==""){
    		alert("请输入请假原因和电话号码");
    	}else if(cont==1){
    		alert("对不起你今天已申请");
    	}else{
    	$.ajax({
    		  type:"post",
    		  url: "student_leave",
    		  data: {
    			  lreson:$('#lreson').val(),
    			  lnumber:$('#lnumber').val(),
    			  startDate:$('#startDate').val(),
    			  endDate:$('#endDate').val()
    		  },
    		  dateType:'text',
    		  success: function(s){	
    			  $('#lreson').val('');
    			  $('#lnumber').val('');
    			  cont++;
    			  alert("提交成功");
    		  }
    		});
    	}
    });
    $("#lreson").focusout(function() {
    	if($('#lreson').val().length>50){
    		alert("输入类容不得超过50");	
    		var codes=$('#lreson').val().length;
    		$("#code").html(codes);	
    	}
    });
    $("#lnumber").focusout(function() {
    	
    	var phone = $("#lnumber").val();
    	if(phone && /^1[3|4|5|8]\d{9}$/.test(phone)){
    		
    	}else{
    		alert("请输入13 14 15 18开头的11位电话号码!");
    	}
    });
    $('#startDate').datetimebox({  
    	onSelect:function(date){
    		if(date.getFullYear()!=newyear){
    			$('#startDate').datetimebox('setValue', ingdate);
    			alert('对不起你只能请今年的假，明年的假明年请吧！');
    		}else if(date.getMonth()>newmonth){
    			$('#startDate').datetimebox('setValue', ingdate);
    			alert('对不起请假不能超过一个月！');
    		}else if(date.getDate()<newDate){
    			alert('对不起你选的天有错');
    		}else if(20<newhours){
    			$('#startDate').datetimebox('setValue', ingdate);
    			alert('对不起你选的时间有误');
    		}	
    	}
    });
    
    $('#endDate').datetimebox({  
    	onSelect:function(date){
    		if(date.getFullYear()!=newyear){
    			alert('对不起你只能请今年的假，明年的假明年请吧！');
    			$('#endDate').datetimebox('setValue', ingdate);
    		}else if(date.getMonth()<newmonth){
    			alert('对不起请假不能超过一个月！');
    			$('#endDate').datetimebox('setValue', ingdate);
    		}else if(date.getDate()-1<newDate){
    			alert('对不起你选的天有错');
    			$('#endDate').datetimebox('setValue', ingdate);
    		}else if(22<newhours){
    			alert('对不起此时间不可以请假');
    			$('#endDate').datetimebox('setValue', ingdate);
    		}
    	}
    });
 
});
function checkLen(obj){
    var maxChars=50;
    if (obj.value.length>=maxChars){
    obj.value = obj.value.substring(0,maxChars);
    }
  var curr = maxChars - obj.value.length;
  document.getElementById("code").innerHTML =(50-curr).toString()+'/50';
};
</script>
</head>
<body>
<h2 align="center">请假申请:</h2>
<hr>
	<div class="row">
		  <div class="col-md-3"></div>
		  <div class="col-md-2" align="right"><h4>请假事由</h4></div>
		  <div class="col-md-3">			 			
						  <div class="input-group input-group-lg">
						  <textarea id="lreson" placeholder="输入请假原因  不得超过50字" onkeyup="checkLen(this)"></textarea><span id="code" ></span>
						  </div>				  	 
		  </div>
		  <div class="col-md-4"></div>
	</div>
	<br>
	<br>
	<div class="row">
		  <div class="col-md-3"></div>
		  <div class="col-md-2" align="right"><h4>请假期间联系电话:</h4></div>
		  <div class="col-md-3">	 	
						  <div class="input-group input-group-lg">
						  <input type="text" id="lnumber" class="form-control easyui-validatebox" placeholder="联系电话">
						  </div>
		  </div>
		  <div class="col-md-4"></div>
	</div>
	<br>

	<div class="row">
		  <div class="col-md-3"></div>
		  <div class="col-md-2" align="right"><h4>起始时间:</h4></div>
		  <div class="col-md-3">
					<input id="startDate" class="easyui-datetimebox" name="birthday"   
					        data-options="required:true,showSeconds:false" value=ingdate.toString() style="width:150px">					  
		  </div>
		  <div class="col-md-4"></div>
	</div>

	<div class="row">
		  <div class="col-md-3"></div>
		  <div class="col-md-2" align="right"><h4>结束时间:</h4></div>
		  <div class="col-md-3">	 	
							<input id="endDate" class="easyui-datetimebox" name="birthday"     
					        data-options="required:true,showSeconds:false" value=ingdate style="width:150px">
		  </div>
		  <div class="col-md-4"></div>
	</div>
	<br>		
	<div class="row">
		  <div class="col-md-5"></div>
		  <div class="col-md-3"><a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">提交申请</a></div>
		  <div class="col-md-4"></div>
	</div>
</body>
</html>